<script setup>
import Banner from '@/index/Banner.vue'
import MyCourse from './MyCourse.vue';
import Recommended from './Recommended.vue';

</script>

<template>
  <div class="center">
    <Banner />
    <div class="main-content-layout">
      <!-- 左栏 -->
      <div class="left-column">
        <MyCourse />
      </div>
      <!-- 右栏 -->
      <div class="right-column">
        <Recommended />
      </div>
    </div>
  </div>
</template>

<style>


.center {width: 90%;max-width: 1400px;margin: 0 auto;}
.main-content-layout {display: flex;gap: 20px;margin-top: 20px;align-items: flex-start;}
.left-column {width: calc(65% - 10px);flex-shrink: 0;min-width: 0;}
.right-column {width: calc(35% - 10px);flex-shrink: 0;}
</style>
